<template>
    <div class="loginRoot">
        <xxl-status></xxl-status>
        <xxl-hint ref="hint" :text="warn.login" @change="hintChange"></xxl-hint>
        <title text="登陆">
            <div slot="left">
                <div @click="back()">返回</div>
            </div>
        </title>
        <div class="ctx" :style="{ height: 'calc(100% - (' + header.top + 'px + 45px))' }">
            <div class="user_id"><span>账号</span><input class="input" v-model="username" type="text"></div>
            <div class="user_password"><span>密码</span> <input class="input" v-model="password" type="password"></div>
            <div class="login_button" @click="login()"><xxl-botton>登陆</xxl-botton></div>
            <div class="warn"><span>没有账号？</span><span @click="rejister()" class="b">注册</span></div>
        </div>
    </div>
</template>

<script>
import api from '../../api';

export default {
    name: 'Login',

    data() {
        return {
            username: "13038209260",
            password: "QQ0303..",
            loging: false,
            warn:{
                login:""
            }
        };
    },

    mounted() {

    },

    methods: {
        back() {
            uni.navigateBack()
        },
        async login() {
            if (this.loging) { return }
            this.loging = true
            let result = await api.userLogin({
                username: this.username,
                password: this.password
            })
            this.loging = false
            if (result.code == 200) {
                let that = this
                uni.getUserProfile({
                    desc: "获取用户信息",
                    success(d) {
                        let data = d.userInfo
                        that.$store.commit('login', {
                            id: that.username,
                            token: result.token,
                            name: data.nickName,
                            head: data.avatarUrl
                        })
                        uni.navigateBack()
                        api.setToken(result.token)
                        
                    }
                });
            }
            else{
                if(result.msg == null){
                    this.warn.login = '用户不存在'
                }
                else{
                    this.warn.login = result.msg
                }
                this.$refs.hint.open()
            }
            this.loging = false
        },
        rejister() {
            uni.navigateTo({ "url": "/pack_rejister/rejister/rejister" })
        },
        hintChange(d){

        }
    },
};
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.loginRoot {
    height: 100vh;
}

.ctx {
    box-sizing: border-box;
    padding-top: 40px;
    position: relative;

    .user_id,
    .user_password {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .input {
        height: 50px;
        width: 70%;
        margin: 20px;
        border-radius: 15px;
        border: 1px solid $uni-color-primary;
        font-size: 25px;
        box-sizing: border-box;
        padding: 10px;
    }

    .login_button {
        margin-top: 50px;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 50px;
    }

    .warn {
        position: absolute;
        text-align: center;
        bottom: 60px;
        width: 100%;
    }

    .b {
        color: $uni-color-primary;
    }
}
</style>